<?php echo view('header.html');?>

<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">
                    碎片内容管理
                </div>

                <div class="mokui-card-form">
                    <form class="layui-form" id="searchForm">
                        
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">名称:</div>
                                <div class="layui-input-inline" style="width: 160px;">
                                    <input type="text" name="title" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-form-mid">调用标识:</div>
                                <div class="layui-input-inline" style="width: 160px;">
                                    <input type="text" name="name" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-form-mid">碎片类型:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="type">
                                        <option value="">所有</option>
                                        <option value="input">单行文本</option>
                                        <option value="textarea">多行文本</option>
                                        <option value="editor">编辑器</option>
                                        <option value="file">单文件</option>
                                        <option value="files">多文件</option>
                                        <option value="media">音视频</option>
                                        <option value="keyvalue">键值对</option>
                                    </select>
                                </div>
                                <button class="layui-btn layui-btn-blue" type="button" lay-submit lay-filter="ams_search" id="ams_search">查询</button>
                                <button class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="ams_reset" id="ams_reset">重置</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body">
                    <table id="listTable" lay-filter="listTable"></table>
                    <script type="text/html" id="toolbarOption">
                        <button type="button" lay-event="toolbar_del" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
                        <button type="button" class="layui-btn layui-btn-blue layui-btn-sm" lay-event="addiframe">添加碎片内容</button>
                    </script>

                    <script type="text/html" id="barOption">
                        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">修改</a>
                        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <?php echo view('footer.html');?>
    <script type="text/javascript">
        layui.use(['form', 'jquery', 'layer', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                table = layui.table;
            

            //数据初始化
            var tableInit = table.render({
                elem: '#listTable',
                toolbar: "#toolbarOption",
                defaultToolbar: [],
                title: '碎片内容列表',
                url: adminpath + 'admin/pieces/index',
                method: 'post',
                cols: [
                    [
                        {
                            type: 'checkbox'
                        },
                        {
                            field: 'id',
                            title: 'ID',
                            width: 80,
                            unresize: true,
                            sort: true
                        },
                        {
                            field: 'displayorder',
                            width: 100,
                            sort: true,
                            title: '排序',
                            templet: function (d) {
                                return '<input type="text" placeholder="0" onblur="displayOrder(' + d.id + ',this)" value="' + d.displayorder + '" autocomplete="off" class="layui-input mokui-reorder">'
                            }
                        },
                        {
                            field: 'type',
                            title: '类型',
                            width: 160,
                            templet: function (d) {
                                var str = '';
                                switch (d.type) {
                                    case 'input':
                                        str = '单行文本(input)';
                                        break;
                                    case 'textarea':
                                        str = '多行文本(textarea)';
                                        break;
                                    case 'editor':
                                        str = '编辑器(editor)';
                                        break;
                                    case 'file':
                                        str = '单文件(file)';
                                        break;
                                    case 'files':
                                        str = '多文件(files)';
                                        break;
                                    case 'media':
                                        str = '音视频(media)';
                                        break;
                                    case 'keyvalue':
                                        str = '键值对(keyvalue)';
                                        break;
                                }
                                return str;
                            }
                        },
                        {
                            field: 'title',
                            width: 300,
                            title: '名称'
                        },
                        {
                            field: 'name',
                            width: 200,
                            title: '调用标识'
                        },
                        {
                            field: 'name',
                            title: '调用方法',
                            templet: function (d) {
                                return "ams_pieces('" + d.name + "')";
                            }
                        },
                        {
                            field: 'description',
                            title: '简介'
                        },
                        {
                            title: '操作',
                            toolbar: '#barOption'
                        }
                    ]
                ],
                page: {
                    layout: ['prev', 'page', 'next', 'count'],
                    groups: 5,
                    first: true,
                    last: true
                },
                response: {
                    statusCode: 0,
                    countName: 'count'
                },
                parseData: function (res) {
                    return {
                        'code': res.code,
                        'data': res.data.data,
                        'count': res.data.total
                    };
                }
            });

            //表头工具栏
            table.on('toolbar(listTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                var ids = [];
                $.each(data, function (i, v) {
                    ids.push(v.id);
                })

                switch (obj.event) {

                    case 'toolbar_del':
                        if (ids.length < 1) {
                            layer.msg('您还没有选择', {
                                icon: 5,
                                anim: 6
                            });
                            return false;
                        }
                        layer.confirm('确定要删除这些？', function (index) {
                            $.post(adminpath + 'admin/pieces/rdel', {
                                ids: ids
                            }, function (res) {
                                if (res.code == 0) {
                                    layer.msg('操作成功', {
                                        icon: 1,
                                        time: 1500
                                    });
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 5,
                                        anim: 6
                                    });
                                }
                                tableInit.reload();
                            }, 'json');
                            layer.close(index);
                        });
                        break;

                    case 'add':
                        var title = '创建碎片内容';
                        var url = adminpath + 'admin/pieces/add';
                        open_parent_tab(title, url);
                        // layer.open({
                        //     type: 2,
                        //     area: ['800px', '80%'],
                        //     title: title,
                        //     content: [url]
                        // });
                        break;
                    case 'addiframe':
                        var title = '创建碎片内容';
                        var url = adminpath + 'admin/pieces/add';
                        // open_parent_tab(title, url);
                        layer.open({
                            type: 2,
                            area: ['1200px', '90%'],
                            title: false,
                            content: [adminpath + 'admin/pieces/add']
                        });
                        break;

                };
            });

            window.displayOrder = function (id, obj) {
                var displayorder = $(obj).val();
                $.post('displayorder', {
                    id: id,
                    displayorder: displayorder
                }, function (res) {
                    console.log(res);
                    if (res.code == 0) {
                        layer.msg('排序成功', {
                            time: 1000,
                            icon: 1
                        });
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                }, 'json');
            }

            //监听表格行操作
            table.on('tool(listTable)', function (obj) {
                var data = obj.data;
                var id = data.id

                switch (obj.event) {

                    case 'add':
                        layer.open({
                            type: 2,
                            area: ['1000px', '80%'],
                            title: '添加碎片内容',
                            content: [adminpath + 'admin/pieces/add?id=' + id, 'no']
                        });
                        break;

                    case 'edit':
                        var title = '编辑碎片内容：' + data.title;
                        var url = adminpath + 'admin/pieces/edit?id=' + id;
                        layer.open({
                            type: 2,
                            area: ['1000px', '90%'],
                            title: false,
                            content: [url]
                        });
                        // open_parent_tab(title, url);
                        break;

                    case 'del':
                        layer.confirm('确定要删除吗？', function (index) {

                            $.post(adminpath + 'admin/pieces/del', {
                                ids: [id]
                            }, function (res) {
                                if (res.code == 0) {
                                    tableInit.reload();
                                    layer.msg('操作成功', {
                                        icon: 1,
                                        time: 1000
                                    });
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 5,
                                        anim: 6,
                                        time: 2000
                                    });
                                }
                            }, 'json');
                        });
                        break;
                }
            });

            //搜索条件
            form.on('submit(ams_reset)', function (data) {
                $("#searchForm")[0].reset();
                form.render();
                $('#ams_search').trigger('click');
            });

            //标题搜索
            form.on('submit(ams_search)', function (data) {
                tableInit.reload({
                    where: data.field
                    , page: {
                        curr: 1
                    }
                });
            });

        });
    </script>
</body>

</html>
